import { Badge, notification } from 'antd';
import { BellOutlined } from '@ant-design/icons';
import React, { useState, useEffect, useRef } from 'react';
import { connect, history, FormattedMessage } from 'umi';
import Avatar from './AvatarDropdown';
import styles from './index.less';
import SelectLang from '../SelectLang';
import { getRefreshTime, getAudioData } from '@/services';
import ProDescriptions from '@ant-design/pro-descriptions';

const GlobalHeaderRight = (props) => {
  const { theme, layout, dispatch, msgList } = props;
  const [time, setTime] = useState(5);
  const [globalAudioUrl, setGlobalAudioUrl] = useState();
  const globalAudioRef = useRef();
  let timer = null;

  let className = styles.right;

  if (theme === 'dark' && layout === 'top') {
    className = `${styles.right}  ${styles.dark}`;
  }

  const goMessage = () => {
    if (window.location.pathname !== '/message') {
      history.push('/message');
    }
  };

  const queryRefreshTime = async () => {
    const res = await getRefreshTime(1);
    if (res) {
      setTime(res.data.value); // 刷新时间单位秒
    }
  };

  const queryAudioData = async () => {
    const res = await getAudioData();
    console.log('res', res);
    if (res && res.data) {
      setGlobalAudioUrl(res.data?.audio?.audioUrl);
      const info = res.data;
      notification.warning({
        message: '指标报警',
        description: (
          <ProDescriptions span={24}>
            <ProDescriptions.Item
              span={24}
              label={<FormattedMessage id="pages.dataQuery.checkPoint" defaultMessage="检测点" />}
            >
              {info.infraredDeviceLocation}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              span={24}
              label={
                <FormattedMessage id="pages.history.infraredDeviceName" defaultMessage="生产线" />
              }
            >
              {info.infraredDeviceName}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              span={24}
              label={
                <FormattedMessage id="pages.dataQuery.materialName" defaultMessage="物料名称" />
              }
            >
              {info.materialName}
            </ProDescriptions.Item>
            {/* <ProDescriptions.Item
              span={24}
              label={
                <FormattedMessage id="pages.dataQuery.materialCode" defaultMessage="物料编码" />
              }
            >
              {info.materialCode}
            </ProDescriptions.Item> */}
            <ProDescriptions.Item
              span={24}
              label={<FormattedMessage id="pages.dataQuery.project" defaultMessage="检测项目" />}
            >
              {info.inspectionName}
            </ProDescriptions.Item>
            {/* <ProDescriptions.Item
              span={24}
              label={
                <FormattedMessage
                  id="pages.dataMain.checkProjectCode"
                  defaultMessage="检测项目编码"
                />
              }
            >
              {info.inspectionCode}
            </ProDescriptions.Item> */}
            <ProDescriptions.Item
              span={24}
              label={<FormattedMessage id="pages.dataQuery.min" defaultMessage="最小值" />}
            >
              {info.minValue}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              span={24}
              label={<FormattedMessage id="pages.dataQuery.max" defaultMessage="最大值" />}
            >
              {info.maxValue}
            </ProDescriptions.Item>
            <ProDescriptions.Item
              span={24}
              label={<FormattedMessage id="pages.history.alarmValue" defaultMessage="报警值" />}
            >
              {info.alarmValue}
            </ProDescriptions.Item>
          </ProDescriptions>
        ),
      });
      setTimeout(() => {
        globalAudioRef.current?.play();
      }, 500);
    }
  };

  useEffect(() => {
    queryRefreshTime();
    dispatch({
      type: 'global/setMsgList',
    });
    queryAudioData();
  }, []);

  useEffect(() => {
    timer = setInterval(() => {
      dispatch({
        type: 'global/setMsgList',
      });
      if (globalAudioRef.current?.paused) {
        queryAudioData();
      }
    }, time * 1000);
    return () => {
      clearInterval(timer);
    };
  });

  return (
    <div className={className}>
      <span onClick={goMessage} style={{ marginRight: 20, cursor: 'pointer' }}>
        <Badge
          count={msgList.length}
          style={{
            boxShadow: 'none',
            fontSize: 12,
          }}
        >
          <BellOutlined style={{ fontSize: 16 }} />
        </Badge>
        <audio ref={globalAudioRef} src={globalAudioUrl}></audio>
      </span>

      <Avatar />
      <SelectLang className={styles.action} />
    </div>
  );
};

export default connect(({ settings, global }) => ({
  theme: settings.navTheme,
  msgList: global.msgList,
  layout: settings.layout,
}))(GlobalHeaderRight);
